<template>
    <div class="form-designer-right-side ignore-event-for-design-table" data-role="ignore-select-field" :class="width?'has-width':'no-width'">
    <span class="icon iconfont left-collapse"
          :class="[width?'icon-doubleright':'icon-doubleleft', 'icon-right-colapse']" @click="width=!width"></span>
    <a-tabs v-model="active">
      <a-tab-pane tab="表单" key="form"/>
      <a-tab-pane tab="视图" key="view"/>
      <a-tab-pane tab="控件" key="field" v-if="!!selectedField"/>
      <a-tab-pane tab="明细表属性" key="subForm" v-if="!!subForm"/>
    </a-tabs>
    <div style="height: calc(100% - 44px); overflow: auto">
      <FormConfig :formDefinition="formDefinition" v-show="active === 'form'"/>
      <ViewConfig :selectedField="selectedField" :selectedView="selectedView" :formDefinition="formDefinition"
                  v-show="active === 'view'"/>
      <FieldConfig :selectedField="selectedField" :selectedView="selectedView" :formDefinition="formDefinition"
                   v-show="active === 'field'"/>
      <SubFormConfig :sub-form="subForm" v-show="active === 'subForm'"/>
    </div>
  </div>
</template>
<script>
import FormConfig from '@/components/hhd/design/FormDesigner/form/FormConfig.vue';
import ViewConfig from '@/components/hhd/design/FormDesigner/form/ViewConfig.vue';
import FieldConfig from '@/components/hhd/design/FormDesigner/form/FieldConfig.vue';
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition} from '@/components/hhd/design/FormDesigner/types';
import {getElementParentUntilHasRole} from '@/utils/FormDesignUtils';
import $ from 'jquery';
import SubFormConfig from '@/components/hhd/design/FormDesigner/form/SubFormConfig.vue';

export default {
  name: 'FormDesignerRightSide',
  components: {SubFormConfig, FieldConfig, ViewConfig, FormConfig},
  model: createModelForVue('formDefinition'),
  props: {
    selection: createProps(Object),
    formDefinition: createProps(Object, createFormDefinition),
    selectedView: createProps(String),
    selectedField: createProps(String),
  },
  data() {
    return {
      width: true,
      active: 'form',
      subForm: undefined,
    };
  },
  methods: {
    getSubForm() {
      if (!this.selection || !this.selection.getSelectedTds) {
        this.subForm = undefined;
        this.active = 'form';
      } else {
        let tds = this.selection.getSelectedTds();
        if(!tds || !tds.length) return;
        let layout = getElementParentUntilHasRole(tds[0], 'layout');
        let subFormId = $(layout).attr('data-sub-form-id');
        if(!subFormId) return;
        this.subForm = (this.formDefinition.subForms || []).find(s => s.id === subFormId);
        if (this.subForm) {
          this.active = 'subForm';
        }
      }
    },
    selectionChange() {
      this.$nextTick(() => {
        this.getSubForm();
      });
    },
  },
  watch: {
    selection: {
      handler() {
        this.selectionChange();
      },
      immediate: true,
    },
    selectedField: {
      handler() {
        this.$nextTick(() => {
          if (this.selectedField) {
            this.active = 'field';
          } else {
            if (this.active === 'field') {
              this.active = 'form';
            }
          }
        });
      },
      immediate: true,
    }
  }
};
</script>
<style scoped>
.left-collapse {
  position: absolute;
  background: white;
  color: dodgerblue;
  font-size: 18px;
  width: 25px;
}

.has-width {
  position: relative;
}

.no-width {
  position: relative;
  width: 0;
}
</style>
